export const metadata = {
  title: 'Smooth Wavy Canvas',
  description:
    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
};

<ComponentCodePreview name='smooth-wavy-canvas' type="separate" />

## Props

| Prop             | Type       | Default           | Description                                                        |
| ---------------- | ---------- | ------------------| ------------------------------------------------------------------ |
| `backgroundColor`| `string`   | `'#F8F6F0'`        | Background color of the canvas.                                    |
| `primaryColor`   | `string`   | `'45, 45, 45'`     | RGB value for the primary wavy line.                               |
| `secondaryColor` | `string`   | `'80, 80, 80'`     | RGB value for the secondary wavy line.                             |
| `accentColor`    | `string`   | `'120, 120, 120'`  | RGB value for the accent wavy line.                                |
| `lineOpacity`    | `number`   | `1`                | Opacity level for all wavy lines.                                  |
| `animationSpeed` | `number`   | `0.004`            | Speed of the wave animation.                                       |
